<template>
  <div class="all-shop">
  <div class="top">
    <div class="mianbao">
    <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>全部商品</el-breadcrumb-item>
       <el-breadcrumb-item>{{$route.meta.title}}</el-breadcrumb-item>
     </el-breadcrumb>
    </div>
    <div class="fenlei">
    <li>分类</li>
    </div>
    <div class="daohang">
      <tr>
      <td v-for="item in fenleiArr" :key="item.categoryId"  @click="Btn(item.categoryId)">{{item.categoryName}}</td>
      </tr>
    </div>
   </div>
   <div class="show" >
   <div class="two">
        <div class="electrical-show">
        <div class="moret">
        <div class="cardt" v-for="item1 in shopArr" :key="item1.productId" @click="quanbu(item1.productId)">
        <div class="card-pic">
        <img :src="'http://www.codeedu.com.cn/' + item1.productPicture" alt="" class="card-pic">
          <div class="mingzi">
          {{ item1.productName}}
          </div>
          <div class="jieshao">
          {{item1.productIntro}}
          </div>
          <div class="price">{{item1.productSellingPrice }}</div>
          <div class="noprice">{{item1.productPrice}}</div>
          <div class="no"></div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="fenye">
        <el-pagination
          background
          layout="prev, pager, next"         
          :total="totel"
          :page-size="this.chaxunArr.pageSize"
          @current-change="handleCurrentChange"
          :current-page="this.chaxunArr.pageNum"
          >
        </el-pagination>
        </div>
   </div>
  </div>
</template>

<script>
import {product,category} from "../api/api"
export default {
    name:'allshop',
    data() {
      return {
        chaxunArr:{
          pageNum:1,
          pageSize:15,
          categoryId:'',
          productId:'',
          productName:''
        },
        idss:'',
        shopArr:[],
      
      totel:1,
      radio:0,
           
      fenleiArr:{
        categoryId: 0,
			  categoryName: ""
      },
      
    }
    },
    created(){
      this.product1()
      this.category()
      console.log(this.idss);
      
    },
    methods: {

      search(){
         
         
      },
      Btn(id) {
        product({
          pageNum:1,
          pageSize:15,
          categoryId:id
        }).then(res=>{
        console.log("ll",res);
        this.shopArr = res.data.rows;
        this.totel = res.data.total;
        
 
      })
          },

      //查询商品分类列表
      category(){
        
        category().then(res=>{
          console.log("ll",res);
          this.fenleiArr = res.data.data
        })
      },
      // //查询商品列表
      product1(){
        if(this.$route.query.row) {
          this.chaxunArr.categoryId = this.$route.query.row;
        }
        product(this.chaxunArr).then(res=>{
        console.log(res)
        this.shopArr = res.data.rows
        this.totel = res.data.total
        console.log('www',this.totel);
      })
      },

      quanbu(productId){
        this.$router.push({
        path:'/ProductDetails',
        query:{
          row:productId
        }
    });
      },
      //分页
      handleCurrentChange(val){
        console.log(val);
        this.chaxunArr.pageNum = val;
      this.product1(this.chaxunArr);
      }
      
    },



}
</script>

<style scoped>
.all-shop{
  width: 1200px;
  margin: auto;
  min-height: calc(100vh  - 200px - 336px);
}
.top{
  margin: auto;
  width: 100%;
  height: 90px;
  background-color: #FFFFFF;
}
.mianbao{
  height: 16px;
  margin-top: 24px;
  margin-left: 340px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #606266;
  margin-left: 0px;
}
::v-deep .el-breadcrumb__item{
  color: #606266;
}
.fenlei{
  width: 32px;
  height: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #333333;
  list-style-type: none;
  margin-top: 40px;
}
.daohang{
  width: 706px;
  height: 42px;
  border: 1px solid #DCDFE6;
  border-radius: 4px 4px 0px 0px;
  margin-left: 57px;
  margin-top: -33px;
}
.daohang tr{
    display: flex;
    list-style-type: none;
    line-height: 42px;
    justify-content:space-between;
}
.daohang tr td{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  border: 1px solid #DCDFE6;
  list-style-type: none;
  width: 89px;
  
}
.show{
  width: 1200px;
  height: 1000px;
  margin: auto;
  background: #F5F5F5;
  margin-top: -20;
}

.one{
    position: absolute;
  }

  .xiaomi{
    width: 232px;
    height: 614px;
    background: url(../assets/Rectangle\ 146.png);
  }
  .moret{
    width: 1200px;
    height: 920px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 300px 300px 300px;
    grid-gap: 11px 3px;
  }
  .cardt{
  width: 232px;
  height: 300px;
  background-color: #FFFFFF;
  position: relative;
}
  .phone-show{
    display: flex;
  }
.card-pic{
  width: 160px;
  height: 160px;
  position: absolute;
  left: 21px;
  top: 14px;
}
.mingzi{
  height: 14px;
  width: 150px;
  overflow: hidden;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.2px;
  color: #333333;
  position: absolute;
  top: 198px;
  left: 14px;
}
.jieshao{
  position: absolute;
  font-style: normal;
  height: 12px;
  width: 150px;
  overflow: hidden;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.1px;
  color: #B0B0B0;
  left: 10px;
  top: 226px;
}
.price{
  position: absolute;
  top: 250px;
  left: 30px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.1px;
  color: #FF6700;
}
.noprice{
  width: 68px;
  height: 16px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #B0B0B0;
  position: absolute;
  top: 250px;
  left: 80px;
}
.no{
  width: 54px;
  height: 1px;
  background: #B0B0B0;
  position: absolute;
  top: 258px;
  left: 87px;
}

</style>